<!--
 * @description 输入身份证号
 * @author dumeng
 * @date 2021/9/14
 -->
<template>
  <section class="change-phone-index" ref="changephonemain">
    <section class="main-close" @click="handleBack">
      <img src="../images/closeLogin.png" alt/>
    </section>
    <section class="main-form">
      <h2>修改手机号</h2>
      <p class="tip">*只有未登录过系统的账号可以通过本功能修改手机号</p>
      <section class="form-inner">
        <section class="form">
          <yd-cell-group>
            <yd-cell-item>
              <yd-input
                  slot="right"
                  v-model.trim="form.idNumber"
                  required
                  id="idNumber"
                  :show-success-icon="false"
                  :show-error-icon="false"
                  placeholder="请输入身份证号"></yd-input>
            </yd-cell-item>

          </yd-cell-group>
        </section>
        <section class="btns">

          <yd-button size="large" type="hollow" class="btn-close" @click.native="handleBack()">关闭</yd-button>
          <yd-button size="large" type="primary" class="loginBtn" @click.native="next()">下一步</yd-button>

        </section>
      </section>
    </section>
    <section v-if="show" class="form-bottom" :class="{ auto: auto }">
      <section class="form-footer">
        <section class="footer-item">
          <section class="item-label">主办单位 ：中华全国总工会</section>
          <section class="item-label">技术支持：中慧智工新媒体科技有限公司</section>
          <section class="item-label">内容支持：《中国工人》杂志社</section>
        </section>
      </section>
    </section>
  </section>
</template>

<script>
import url from '@/views/changePhone/api'
import {Dialog} from 'vant'
import {idNo} from '@/common/validate'

export default {
  name: 'ChangePhone',
  components: {[Dialog.Component.name]: Dialog.Component},
  data: () => {
    return {
      timer: null,
      clientType: localStorage.getItem('sys'),
      logosrc: '/API-ENTERPRISE-APP/app/sysConfig/fileDownloadByName?name=APP_LOGIN_LOGO',
      form: {
        idNumber: '',
      },
      auto: false,
      show: true,
    }
  },
  methods: {
    handleBack() {
      this.$router.replace({
        path: '/login',
      })
    },

    /**
     * 表单验证
     */
    verify4IdNo() {

      if (this.form.idNumber === '') {
        this.$dialog.toast({
          mes: '请输入身份证号！',
          timeout: 1500
        })
        return false
      } else if (!idNo(this.form.idNumber)) {
        this.$dialog.toast({
          mes: '请输入正确的身份证号！',
          timeout: 1500
        })
        return false
      }
      return true
    },

    /**
     * web身份证验证
     */
    next() {
      if (this.verify4IdNo()) {
        /*  this.$router.replace({
            path: '/changePhone/verify',
            name: 'ChangePhoneVerify',
            query: {
              realName:'王**',
              phoneNumber: '186****2286',
              comName: '北京天拓数信科技有限责任公司',
              comId: '111',
              idNo: this.form.idNumber,
              userId: '22222',
            }
          })
          return*/
        this.$openLoading()
        let data = ''
        data = {
          idnumber: this.form.idNumber,
          reqTime: new Date().Format('yyyy-MM-dd hh:mm:ss')
        }
        const signStr = JSON.stringify(data)// 仅处理
        data = {
          param: this.$getRsaCode(signStr)
        }
        this.$axios.post(url.getUserInfoByIdnumber, data).then(res => {
          this.$closeLoading()
          if (res.code === '200') {
            if (res.data) {
              this.$router.replace({
                path: '/changePhone/verify',
                name: 'ChangePhoneVerify',
                query: {
                  realName: res.data.userRealname,
                  phoneNumber: res.data.phoneNumber,
                  comName: res.data.bname,
                  comId: res.data.bid,
                  idNo: this.form.idNumber,
                  userId: res.data.id,
                }
              })
            }
          }
        }).catch((err) => {
          this.$closeLoading()
        })
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    const _this = this
    const ch = this.$refs.changephonemain.clientHeight
    if (ch < 600) {
      this.auto = true
    } else {
      this.auto = false
    }
    if (_this.timer) {
      clearInterval(_this.timer)
      _this.timer = null
    }
    _this.timer = setInterval(() => {
      if (document.getElementById('idNumber')) {
        clearInterval(_this.timer)
        document.getElementById('idNumber').getElementsByTagName('input')[0].addEventListener('click', (e) => {
          this.show = false
          e.target.focus()
        })
        document.getElementById('idNumber').getElementsByTagName('input')[0].addEventListener('blur', (e) => {
          this.show = true
        })
      }
    }, 1000)
  }
}
</script>

<style type="text/scss" lang="scss">
.change-phone-index {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #eff0f4 0%, #f2f3f6 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  .main-close {
    height: $headerHeight;

    img {
      width: rem(32);
      height: rem(32);
      margin: rem(28) 0 rem(28) rem(30);
    }
  }

  .main-form {
    position: absolute;
    left: rem(40);
    top: rem(88 + 40);
    right: rem(40);
    background-color: #fff;
    border-radius: rem(20);
    padding-bottom: rem(90);

    h2 {
      padding: rem(30) 0 0 rem(30);
      font-weight: bold;
      font-size: rem(38);
      color: #333;
    }

    .page-logo {
      display: block;
      margin: 0 auto;
      margin-top: rem(110);
      width: rem(534);
      height: rem(74);
    }

    .page-sub-logo {
      display: block;
      margin: 0 auto;
      margin-top: rem(60);
      width: rem(216);
      height: rem(42);
    }

    .tip {
      margin-top: rem(40);
      text-align: left;
      font-size: rem(32);
      color: red;
      font-weight: bold;
      padding: 0 rem(30) ;
    }

    .form-inner {
      padding: 0 rem(35);

      .form {
        .identifying {
          width: rem(300);
          font-size: rem(28);
          @include font-color($mainColor);
        }

        .yd-cell-right {
          padding-right: 0;
          flex-shrink: 0;
        }

        .yd-cell-item:after {
          display: none;
        }

        margin-top: rem(70);

        .yd-cell {
          background-color: transparent;
        }

        .yd-cell-item {
          padding-left: 0;
          margin-bottom: rem(40);
          height: rem(88);
          background: #f8f8f8;
          border-radius: rem(44);
          padding: 0 rem(35);
        }

        .yd-cell-right {
          padding-right: 0;
          flex-shrink: 0;
        }

        .yd-cell-item:after {
          display: none;
        }

        .yd-cell:after {
          display: none;
        }

        .yd-input-password-open:after {
          color: #a6a6a6;
        }

        .yd-input-clear:after {
          font-size: rem(30);
          color: #ccc;
        }

        input {
          font-size: rem(32);
          font-family: PingFang SC;
          color: #333;
          border: none;
          font-weight: bold;
        }

        input::-webkit-input-placeholder {
          font-size: rem(30);
          font-family: PingFang SC;
          font-weight: 400;
          color: #a6a6a6;
        }

        .iosPwd {
          input[type='password'] {
            font-size: rem(32);

            &::placeholder {
              font-size: rem(30);
            }
          }
        }
      }

      .btns {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn-close {
          width: rem(280);
          height: rem(80);
          font-size: rem(32);
          font-family: PingFang SC;
          font-weight: 400;
          color: #333;
          border-radius: rem(44);
        }

        .loginBtn {
          width: rem(280);
          height: rem(80);
          @include bg-color($mainColor);
          border-radius: rem(44);
          font-size: rem(32);
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .btns-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: rem(44);

          &.botm {
            justify-content: flex-end;
          }

          .item-btn {
            display: inline-block;
            font-size: rem(26);
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            @include font-color($mainColor);
          }
        }
      }
    }
  }

  .form-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: rem(20);

    &.auto {
      margin-top: rem(300);
      position: relative;
    }

    .form-register {
      width: rem(370);
      height: rem(88);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: rem(44);
      margin: 0 auto;
      margin-bottom: rem(50);

      .register-inner {
        text-align: center;
        font-size: rem(28);
        font-family: PingFang SC;

        span:nth-child(1) {
          color: #666666;
        }

        span:nth-child(2) {
          @include font-color($mainColor);
        }
      }
    }

    .form-footer {
      text-align: center;
      font-size: rem(20);
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;

      .footer-item {
        margin-bottom: rem(20);

        .item-label {
          margin-bottom: rem(5);
        }
      }
    }
  }
}

.join-union-tip {
  font-weight: bold;
  color: #333;

  .van-dialog__header {
    line-height: rem(100);
    padding-top: 0;
  }

  .van-dialog__message {
    color: #333;
    padding-left: rem(30);
    padding-right: rem(30);
    padding-top: 0;
  }
}
</style>
